import React ,{useEffect,useState}from 'react'
import { Swiper, Toast } from 'react-vant';
import { NavBar } from 'react-vant';
import { Grid } from 'react-vant';
import { ShopO } from '@react-vant/icons';
import "../../utils/index"
import axios from "../../api/axios"
import {ROUTERMOCK} from "../../types/ListType.d"


const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];


function Shouye() {
  const items = colors.map((color, index) => (
    <Swiper.Item key={color}>
      <div
        onClick={() => {
          Toast.info(`你点击了卡片 ${index + 1}`);
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ));

  useEffect(()=>{
      axios.get("/list").then(res=>{
          setList(res.data.list)
      })
  },[])

  const [list,setList]=useState<Array<ROUTERMOCK>>([])
  return (
    <div>
      <div className="title">
          <NavBar
            title="标题"
            leftText="返回"
            rightText="按钮"
            onClickLeft={() => Toast('返回')}
            onClickRight={() => Toast('按钮')}
          />
      </div>
      <div className="swiper">
          <div className="demo-swiper">
            <Swiper autoplay={5000}>{items}</Swiper>
          </div>
      </div>
      <div className="grid">
      <div className="demo-swiper">
        <Swiper>
          
            <Swiper.Item>
              <Grid columnNum={5}>
                  {Array.from({ length: 10 }, (_, i) => (
                    <Grid.Item key={i} icon={<ShopO />} text="文字" />
                  ))}
              </Grid>
            </Swiper.Item>
            <Swiper.Item>
              <Grid columnNum={5}>
                  {Array.from({ length: 10 }, (_, i) => (
                    <Grid.Item key={i} icon={<ShopO />} text="文字" />
                  ))}
              </Grid>
            </Swiper.Item>
          
        </Swiper>
    
      </div>
      <div>
        <div className="list">
              {
                list&&list.map((item:ROUTERMOCK,index:number)=>{
                    return <div key={index}>
                      <img src={item.img} alt="" />
                      <p>{item.title}</p>
                      <p>￥{item.price}</p>
                    </div>
                })
              }
        </div>
      </div>
    </div>
    </div>
  )
}

export default Shouye